﻿@using ORM.Business.Models.Entities
@using ORM.Helpers
@model ORM.ViewModels.Questions.QuestionDetailsViewModel
@{
    ViewBag.Title = "Câu Hỏi";
}
@if (Model == null)
{
    <table class="contentBox" width="100%">
        <tr>
            <th class="boxTitle">
                Hướng Dẫn
            </th>
        </tr>
        <tr>
            <td style="vertical-align: top;">
                <p>
                    Câu hỏi không tồn tại hoặc đã bị xoá.</p>
            </td>
        </tr>
    </table>
}
else
{
    <table width="100%" style="padding: 0px">
        <colgroup>
            <col span="1" style="width: 83%;" />
            <col span="1" style="width: 15%;" />
        </colgroup>
        <tr>
            <td style="vertical-align: top; padding: 0px">
                <table class="contentBox" width="100%">
                    <tr>
                        <th class="boxTitle">
                            Xem Câu Hỏi
                        </th>
                    </tr>
                    <tr>
                        <td style="vertical-align: top;">
                            <br />
                            @if (Model == null)
                            {
                                <p>
                                    Câu hỏi không tồn tại hoặc đã bị xoá.</p>
                            }
                            else
                            {
                                <fieldset style="border-width: 2px; background-color: whitesmoke; padding: 10px">
                                    <table width="100%" style="vertical-align: top">
                                        <tr>
                                            <td style="width: 15%; vertical-align: top; padding-top: 0px">
                                                <br />
                                                <center>
                                                    <fieldset style="margin-top: 0px">
                                                        @if (ViewBag.CurrentUserId != 0)
                                                        {
                                                            if (Model.Question.IsVotedByCurrentUser)
                                                            {
                                                            <input type="image" src="/Content/Images/Action-arrow-blue-down.ico" class="btnPlusPointForAnQuestion" id="questionPointImage @Model.Question.Id" onclick="PlusPointForAnQuestion('@Model.Question.Id')"  style="width: 30px; height: 30px;" title="Bạn đã cộng điểm cho câu hỏi này &#13;Click tiếp để huỷ"/><br />                 
                                                            }
                                                            else
                                                            {
                                                            <input type="image" src="/Content/Images/Action-arrow-blue-up.ico" class="btnPlusPointForAnQuestion" id="questionPointImage @Model.Question.Id" onclick="PlusPointForAnQuestion('@Model.Question.Id')"  style="width: 30px; height: 30px;" title="Click để cộng điểm cho câu hỏi này nếu bạn thấy nó hữu ích &#13;Click tiếp để huỷ"/><br />                 
                                                            }
                                                        }
                                                        <b id="questionPoint @Model.Question.Id">@Model.Question.UpVotes</b><br />
                                                        Điểm
                                                        <br />
                                                    </fieldset>
                                                    <div style="font-size: 13px">
                                                        <div style="font-weight: bold; padding-top: 5px">
                                                            <a class="titleLink" href="/Account/Details/@Model.Question.PostedById">@Model.Question.PostedBy.Username</a></div>
                                                        @Model.Question.PostedDate.ToString("dd-MM-yyyy")<br />
                                                        @Model.Question.PostedDate.ToString("HH:mm")<br />
                                                    </div>
                                                    @if (Model.Question.IsResolved)
                                                    {
                                      
                                                        <div id="isResolvedQuestion"><img src="/Content/Images/Resolved.ico" width="40px" height="40px" title="Đã Được Giải Quyết" /></div>
                                                    }
                                                    else
                                                    {
                                                        <div id="isResolvedQuestion">
                                                        </div>
                                                    }
                                                </center>
                                            </td>
                                            <td style="width: 85%; border-left: 2px solid gainsboro; padding-left: 22px; padding-bottom: 0px;
                                                vertical-align: top; position: relative">
                                                <div>
                                                    <b><span style="font-size: 18px">@Model.Question.Title</span> </b>
                                                    <br />
                                                    <div style="font-size: 13px; padding-top: 3px; padding-bottom: 5px">
                                                        @Model.Question.Model.Device.Name
                                                        @Model.Question.Model.Manufacturer.Name
                                                        @Model.Question.Model.Name
                                                    </div>
                                                    @Html.Raw(Model.Question.ContentHtml)
                                                </div>
                                                <br />
                                                <table width="100%" style="position: absolute; bottom: 0; font-size: 13px">
                                                    <tr>
                                                        <td style="text-align: left; padding-left: 0px">
                                                            @if (Model.Question.LastUpdate != null)
                                                            {
                                                                @:Sửa lần cuối: @Convert.ToDateTime(Model.Question.LastUpdate).ToString("HH:mm") ngày @Convert.ToDateTime(Model.Question.LastUpdate).ToString("dd/MM/yyyy")
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }
                                                        </td>
                                                        <td style="text-align: right">
                                                            @if (ViewBag.CurrentUserId != 0)
                                                            {
                                                                <table style="float: right">
                                                                    <tr>
                                                                        @if (Model.Question.IsAddedBookmarkByCurrentUser)
                                                                        {
                                                                            <td>
                                                                                <span class="titleLink" onclick="AddBookmarkAnQuestion('@Model.Question.Id')" style="cursor: pointer; color: #034af3">
                                                                                    <span id="QuestionBookMarkText">Xoá khỏi sổ tay cá nhân</span> </span>
                                                                            </td>

                                                                        }
                                                                        else
                                                                        {
                                                                            <td>
                                                                                <span class="titleLink" onclick="AddBookmarkAnQuestion('@Model.Question.Id')" style="cursor: pointer; color: #034af3">
                                                                                    <span id="QuestionBookMarkText">Thêm vào sổ tay cá nhân</span> </span>
                                                                            </td>
                                                                        }
                                                                        @if (ViewBag.CurrentUserId == Model.Question.PostedById)
                                                                        {  
                                                                            <td>
                                                                                <a href="/Question/Edit?Id=@Model.Question.Id" class="titleLink" style="cursor: pointer; color: #034af3">
                                                                                    Sửa câu hỏi</a>
                                                                            </td>                                                           
                                                                            <td>
                                                                                <span href="" class="titleLink" onclick="DeleteQuestion('@Model.Question.Id')" style="cursor: pointer; color: #034af3">
                                                                                    Xoá câu hỏi</span>
                                                                            </td>
                                                                        }
                                                                        else
                                                                        {
                                                                            if (Model.Question.IsReportedByCurrentUser)
                                                                            {
                                                                            <td>
                                                                                <span class="titleLink" onclick="ReportAnQuestion('@Model.Question.Id')" style="cursor: pointer; color: #034af3">
                                                                                    <span id="ReportQuestionText">Huỷ báo cáo</span> </span>
                                                                            </td>
                                                                            }
                                                                            else
                                                                            {
                                                                            <td>
                                                                                <span class="titleLink" onclick="ReportAnQuestion('@Model.Question.Id')" style="cursor: pointer; color: #034af3">
                                                                                    <span id="ReportQuestionText">Báo cáo</span> </span>
                                                                            </td>
                                                                            }
                                                                            if (User.IsInRole("Admin"))
                                                                            {
                                                                            <td>
                                                                                <span href="" class="titleLink" onclick="DeleteQuestion('@Model.Question.Id')" style="cursor: pointer; color: #034af3">
                                                                                    Xoá câu hỏi</span>
                                                                            </td>
                                                                            }
                                                                        }
                                                                    </tr>
                                                                </table>
                                                            }
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </fieldset>
                                <br />
                                <br />
                                <h3>Trả Lời</h3>
                                <br />
                                <div id="answerTabs" class="css-tabs" style="width: 100%; vertical-align: bottom;
                                    height: 33px; display: inline-block; padding-top: 15px">
                                    <ul class="menu" id="tabsfullbox" style="height: 100%; width: 100%">
                                        <li id="tabAnswer-2"><a href="#tabAnswer-2" id="tabAnswer2" onclick="loadAnswerTab(2)">
                                            Mới Nhất</a> </li>
                                        <li id="tabAnswer-1"><a href="#tabAnswer-1" id="tabAnswer1" onclick="loadAnswerTab(1)">
                                            Điểm Cao Nhất</a> </li>
                                        <li id="tabAnswer-3"><a href="#tabAnswer-3" id="tabAnswer3" onclick="loadAnswerTab(3)">
                                            Đã Được Chấp Nhận</a> </li>
                                    </ul>
                                </div>
                                <div style="width: 100%; border-top: solid 1px #808080; padding-top: 10px">
                                    <div class="tabsfullcontent" id="tabAnswerContent-1">
                                    </div>
                                    <div class="tabsfullcontent" id="tabAnswerContent-2">
                                    </div>
                                    <div class="tabsfullcontent" id="tabAnswerContent-3">
                                    </div>
                                </div>
                                <hr />
                                <br />
                                                            if (ViewBag.CurrentUserId != 0)
                                                            {
                                <h3><img src="/Content/Images/Comment-Add (1).ico" width="30px" height="30px" /> Thêm vào
                                    câu trả lời của bạn:</h3>
                                <br />
                                <br />
                                @Html.Partial("_AnswerInputForm", new Answer { QuestionId = Model.Question.Id })
                                                            }
                
                                <br />
                                <br />
                                @Html.Hidden("SelectedAnswerTab", 1)
                                @Html.Hidden("SelectedAnswerPage", 1)    
                                <script type="text/javascript">
    function loadAnswerTab(index) {
         $("#SelectedAnswerTab").val(index);
        $("#SelectedAnswerPage").val(1);
        //Set lai bottomBorder cho cac tab
        for (var i = 1; i <= 3; i++) {
            var divId = "tabAnswerContent-" + i;
            var divElement = document.getElementById(divId);
            var tabId = "tabAnswer" + i;
            var myTab = document.getElementById(tabId);
            if (i != index) {
                divElement.innerHTML = "";
                myTab.style.borderBottom = "1px solid #808080";
            } else {
                divElement.innerHTML = "";
                myTab.style.borderBottom = "solid 1px white";
            }
        }

        var targetDiv = "tabAnswerContent-" + index;
        //$(targetDiv).html("<img src='@Url.Content("~/Content/images/main/loading.gif")' style='margin-left: 455px;'/>");
        //document.getElementById(targetDiv).innerHTML = "Đang tải dữ liệu...";

        //set url and data to send
        var url;
        var condition;
        var questionId = @Model.Question.Id;
        if (index == 1) {
            condition = "highScore";
        } else if (index == 2) {
            condition = "new";
        } else if (index == 3) {
            condition = "accepted";
        }
        url = "/Question/GetAnswerList?questionId=" + questionId + "&condition=" + condition;
        $.get(url, function(result) {
            document.getElementById(targetDiv).innerHTML = result;
        });
    }

    $(document).ready(function() {

        $('#tabanswerfullbox').tabs();
            loadAnswerTab(2);
    });
                                </script>




                                <script type="text/javascript">
    function PlusPointForAnQuestion(questionId){
        //var _metaData = jQuery.metadata.get(this);
        var pointElementName = 'questionPoint ' + questionId;
        var imageElementName = 'questionPointImage ' + questionId;
        $.ajax({
            type: "POST",
            url: "@Url.Action("PlusPointForAnQuestion", "Question")",
            dataType: "json",
            data: {
                QuestionId: questionId
            },
            success: function(data) {
                if (data.message) {
                    alert(data.message);
                } else {
                    document.getElementById(pointElementName).innerHTML = data.newPoint;
                    var currentImage = document.getElementById(imageElementName).getAttribute('src');
                    if(currentImage == "/Content/Images/Action-arrow-blue-up.ico") {
                        document.getElementById(imageElementName).setAttribute('src', '/Content/Images/Action-arrow-blue-down.ico');
                        document.getElementById(imageElementName).setAttribute('title', 'Bạn đã cộng điểm cho câu hỏi này. Click tiếp để huỷ');
                    }
                    else {
                        document.getElementById(imageElementName).setAttribute('src', '/Content/Images/Action-arrow-blue-up.ico');
                        document.getElementById(imageElementName).setAttribute('title', 'Click để cộng điểm cho câu hỏi này nếu bạn thấy nó hữu ích. Click tiếp để huỷ');
                    }
                }

//                        var firstli = $('.comment-list li').first();
//                        $(firstli).show(200, function(){$(this).fadeTo(300,1)});

//                        if(data != "") {
//                            var total = parseInt($("#totalQuestion").html());
//                            $("#totalQuestion").html(total + 1);
//                        }
            },
            error: function(result, error) {
                alert(" Can't do because: " + error.responseText);
            },

            complete: function() {
//                        isPosting = false;
            }
        });
    };
    
    function ReportAnQuestion(questionId){
        if(@ViewBag.CurrentUserId == 0) {
            alert("Bạn phải đăng nhập để thực hiện chức năng này");
            return;
        }
        var imageElementName = 'reportQuestionImage ' + questionId;
        var currentText = document.getElementById("ReportQuestionText").innerHTML;
        if(currentText == "Huỷ báo cáo") {
            $(document.createElement('div'))
        .attr({title: 'Fixtech.vn', 'class': 'alert'})
        .html("Bạn muốn huỷ báo cáo sai phạm câu hỏi này?")
        .dialog({
            buttons: {"Xác Nhận": function(){
                                    $.ajax({
                type: "POST",
                url: "@Url.Action("ReportAnQuestion", "Question")",
                dataType: "json",
                data: {
                    QuestionId: questionId
                },
                success: function(data) {
                    if (data.message) {
                        alert(data.message);
                    } else {
                        
                    
                        document.getElementById("ReportQuestionText").innerHTML = "Báo cáo";
                    }

//                        var firstli = $('.comment-list li').first();
//                        $(firstli).show(200, function(){$(this).fadeTo(300,1)});

//                        if(data != "") {
//                            var total = parseInt($("#totalQuestion").html());
//                            $("#totalQuestion").html(total + 1);
//                        }
                },
                error: function(result, error) {
                    alert(" Can't do because: " + error.responseText);
                },

                complete: function() {
//                        isPosting = false;
                }
            });
                $(this).dialog('close');}, "Huỷ": function(){$(this).dialog('close');}},
            close: function(){$(this).remove();},
            draggable: true,
            modal: true,
            resizable: false,
            width: 500,
            open: function(event, ui) {
        $("button").blur();
    }
});


            
        } else {
            $(document.createElement('div'))
        .attr({title: 'Fixtech.vn', 'class': 'alert'})
        .html("<div>Lý do bạn muốn báo cáo sai phạm câu hỏi này là:<br/><br/><input type=text id=txtQuestionReport style='width:400px'/><br/><div id=inputMessage style='color:red; font-size:14px'></div></div>")
        .dialog({
            buttons: {"Xác Nhận": function() {
                var reason = $("#txtQuestionReport").val().trim();
                if(reason != "") {
                    $.ajax({
                type: "POST",
                url: "@Url.Action("ReportAnQuestion", "Question")",
                dataType: "json",
                data: {
                    QuestionId: questionId,
                    Reason: reason
                },
                success: function(data) {
                    if (data.message) {
                        alert(data.message);
                    } else {
                        
                    alert("Báo cáo hoàn tất!<br/>Ban quản trị sẽ xử lý thông tin trong thời gian sớm nhất.");
                        document.getElementById("ReportQuestionText").innerHTML = "Huỷ báo cáo";
                    }

//                        var firstli = $('.comment-list li').first();
//                        $(firstli).show(200, function(){$(this).fadeTo(300,1)});

//                        if(data != "") {
//                            var total = parseInt($("#totalQuestion").html());
//                            $("#totalQuestion").html(total + 1);
//                        }
                },
                error: function(result, error) {
                    alert(" Can't do because: " + error.responseText);
                },

                complete: function() {
//                        isPosting = false;
                }
            });
                    $(this).dialog('close');
                } else {
                    document.getElementById("inputMessage").innerHTML = "Lý do sai phạm không thể để trống!";    
                }
                
            }, "Huỷ": function(){$(this).dialog('close');}},
            close: function(){$(this).remove();},
            draggable: true,
            modal: true,
            resizable: false,
            width: 500,
            open: function(event, ui) {
        $("button").blur();
    }
});
           
       
    }
        }


     function DeleteQuestion(questionId) {
         $(document.createElement('div'))
        .attr({title: 'Fixtech.vn', 'class': 'alert'})
        .html("Bạn có chắc chắn muốn xoá câu hỏi này?")
        .dialog({
            buttons: {"Xác Nhận": function(){
               
                        $.ajax({
            type: "POST",
            url: "@Url.Action("Delete", "Question")",
            dataType: "json",
            data: {
                id: questionId
            },
            success: function(data) {
                if (data) {
                    alert(data);
                } else {
                                        $(document.createElement('div'))
        .attr({title: 'Fixtech.vn', 'class': 'alert'})
        .html("Xoá câu hỏi thành công!")
        .dialog({
            buttons: {OK: function() {
                window.location.href = "/Question/Index";
                $(this).dialog('close');
                
            }},
            close: function() {   
                window.location.href = "/Question/Index";
                $(this).remove();
                
            },
            draggable: true,
            modal: true,
            resizable: false,
            width: 500,
            open: function(event, ui) {
        $("button").blur();
    }
        });
                    
                }
$(this).remove();
            },
            error: function(result, error) {
                alert(" Can't do because: " + error.responseText);
            },

            complete: function() {
//                        isPosting = false;
            }
        });
                
                }, "Huỷ": function(){$(this).dialog('close');}},
            close: function(){$(this).remove();},
            draggable: true,
            modal: true,
            resizable: false,
            width: 500,
            open: function(event, ui) {
        $("button").blur();
    }
});


    }
    function AddBookmarkAnQuestion(questionId){
        if(@ViewBag.CurrentUserId == 0) {
            alert("Bạn phải đăng nhập để thực hiện chức năng này");
            return;
        }
            var imageElementName = 'addBookmarkQuestionImage ' + questionId;
            $.ajax({
                type: "POST",
                url: "@Url.Action("AddBookmarkAnQuestion", "Question")",
                dataType: "json",
                data: {
                    QuestionId: questionId,
                },
                success: function(data) {
                    if (data.message) {
                        alert(data.message);
                    } else {
                        var currentText = document.getElementById("QuestionBookMarkText").innerHTML;
                    
                        if(currentText == "Xoá khỏi sổ tay cá nhân") {
//                            document.getElementById(imageElementName).setAttribute('src', '/Content/Images/Actions-bookmark-add.ico');
                            document.getElementById("QuestionBookMarkText").innerHTML = "Thêm vào sổ tay cá nhân";
                        }
                        else {
//                            document.getElementById(imageElementName).setAttribute('src', '/Content/Images/favorite-remove.ico');
                           document.getElementById("QuestionBookMarkText").innerHTML = "Xoá khỏi sổ tay cá nhân";
                        }
                    }

//                        var firstli = $('.comment-list li').first();
//                        $(firstli).show(200, function(){$(this).fadeTo(300,1)});

//                        if(data != "") {
//                            var total = parseInt($("#totalQuestion").html());
//                            $("#totalQuestion").html(total + 1);
//                        }
                },
                error: function(result, error) {
                    alert(" Can't do because: " + error.responseText);
                },

                complete: function() {
//                        isPosting = false;
                }
            });
       
    };
                                </script>
                            }
                        </td>
                    </tr>
                </table>
            </td>
            <td style="vertical-align: top; padding: 0px">
                <table width="100%" class="contentBox">
                    <tr>
                        <th class="boxTitle">
                            <b style="font-size: 15px">@Model.Question.Model.Name</b>
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <center>
                                <img src="@Url.ModelAvatar(Model.Question.Model, ORM.Models.ImageType.Big)" alt="@Model.Question.Model.Name" class="big-imgavatar" width="180px" /><br />
                            </center>
                            <br />
                            <div style="font-size: 13px; color: gray">
                                @Model.Question.Model.Description
                            </div>
                            <table>
                                <tr>
                                    <td style="padding-top: 10px">
                                        <img src="/Content/Images/preferences-system.ico" width="20px" height="20px" />
                                    </td>
                                    <td style="padding: 0px">
                                        <a class="titleLink" href="/Guide/Index?deviceId=@Model.Question.Model.Device.Id&manufacturerId=@Model.Question.Model.Manufacturer.Id&modelId=@Model.Question.ModelId" title="Xem tất cả các bài hướng dẫn cho @Model.Question.Model.Device.Name @Model.Question.Model.Manufacturer.Name @Model.Question.Model.Name">@ViewBag.NumberOfGuides
                                            hướng dẫn</a>
                                    </td>
                                    <td>
                                        <a href="/Guide/Create?modelId=@Model.Question.ModelId">
                                            <img src="/Content/Images/Add.ico" width="13px" height="13px" title="Thêm bài mới" /></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/Content/Images/preferences-system.ico" width="20px" height="20px" />
                                    </td>
                                    <td style="padding: 0px">
                                        <a class="titleLink" href="/Question/Index?deviceId=@Model.Question.Model.Device.Id&manufacturerId=@Model.Question.Model.Manufacturer.Id&modelId=@Model.Question.ModelId" title="Xem tất cả các câu hỏi cho @Model.Question.Model.Device.Name @Model.Question.Model.Manufacturer.Name @Model.Question.Model.Name">@ViewBag.NumberOfQuestions
                                            câu hỏi</a>
                                    </td>
                                    <td>
                                        <a href="/Question/Create?modelId=@Model.Question.ModelId">
                                            <img src="/Content/Images/Add.ico" width="13px" height="13px" title="Thêm câu hỏi mới" /></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <br />
                <div class="roundedField" style="background-color: gainsboro; padding-top: 10px;
                    padding-bottom: 10px">
                    <center>
                        @using (Html.BeginForm("Create", "Guide", FormMethod.Get))
                        {
                            <input type="submit" id="createNewGuideBtn" class="colorButton" value="Tạo Hướng Dẫn Mới"
                                style="height: 30px; width: 160px" />
                        }
                        <br />
                        @using (Html.BeginForm("Create", "Question", FormMethod.Get))
                        {
                            <input type="submit" id="createNewQuestionBtn" class="colorButton" value="Tạo Câu Hỏi Mới"
                                style="height: 30px; width: 160px" />
                        }
                    </center>
                </div>
                <br />
                @*                <a href="http://hieuvetraitim.org/index.php">
                    <img src="/Content/Images/QuangCao.jpg" width="100%" /></a>
                <br /><br/>
                
                <br/>*@
                <table class="contentBox" width="100%">
                    <tr>
                        <th class="boxTitle">
                            Bài Cũ Hơn
                        </th>
                    </tr>
                    <tr>
                        <td style="font-size: 13px; background-color: #EFF8FB">
                            @foreach (var question in Model.TopOlderQuestions)
                            {
                                <div style="padding: 5px">
                                    <a class="suggestLink" href="/Guide/Details/@question.Id">@question.Title</a></div>
                            }
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

}
